<!DOCTYPE html>
<html lang="zh">

<head>
    <title>戈志刚</title>
    <meta charset="utf-8"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
    <style>
        *{box-sizing: border-box;margin: 0;padding: 0;}
        html,
        body{height: 100%;font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;}
        body{overflow-y: auto;}
        hr{border: none;border: 1px solid #eee;margin: 20px 0;}
        dl{display: block;margin: 10px 0;}
        dt,dd{display: inline-block;}
        .body{display: flex;justify-content: center;background-size: 50px 50px;background-size: 50px 50px;background-color: #333;background-image: -webkit-linear-gradient(transparent 50%, rgba(56,56, 56, .5) 50%, rgba(56,56, 56, .5)), -webkit-linear-gradient(0deg, transparent 50%, rgba(56,56, 56, .5) 50%, rgba(56,56, 56, .5));background-image: -moz-linear-gradient(transparent 50%, rgba(56,56, 56, .5) 50%, rgba(56,56, 56, .5)), -moz-linear-gradient(0deg, transparent 50%, rgba(56,56, 56, .5) 50%, rgba(56,56, 56, .5));background-image: -ms-linear-gradient(transparent 50%, rgba(56,56, 56, .5) 50%, rgba(56,56, 56, .5)), -ms-linear-gradient(0deg, transparent 50%, rgba(56,56, 56, .5) 50%, rgba(56,56, 56, .5));background-image: -o-linear-gradient(transparent 50%, rgba(56,56, 56, .5) 50%, rgba(56,56, 56, .5)), -o-linear-gradient(0deg, transparent 50%, rgba(56,56, 56, .5) 50%, rgba(56,56, 56, .5));background-image: linear-gradient(transparent 50%, rgba(56,56, 56, .5) 50%, rgba(56,56, 56, .5)), linear-gradient(0deg, transparent 50%, rgba(56,56, 56, .5) 50%, rgba(56,56, 56, .5));}
        .flex{position: relative;display: table;width: 900px;height: 100%;color: #555;}
        .flex-right{display: table-cell;vertical-align: top;padding-top: 100px;height: 100%;padding-left: 30px;padding-right: 30px;margin-left: 30%;}
        .flex-left{display: table-cell;vertical-align: top;width: 30%;padding-top: 225px;padding-left: 20px;padding-right: 20px;}
        .flex-left-bg{background-color: #e1e1e1;background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(193, 187, 187, 0.5)), to(rgba(193, 187, 187, 0.5))), -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(193, 187, 187, 0.5)), to(rgba(193, 187, 187, 0.5)));background-image: -moz-linear-gradient(transparent 50%, rgba(193, 187, 187, 0.5) 50%, rgba(193, 187, 187, 0.5)), -moz-linear-gradient(0deg, transparent 50%, rgba(193, 187, 187, 0.5) 50%, rgba(193, 187, 187, 0.5));background-image: -o-linear-gradient(transparent 50%, rgba(193, 187, 187, 0.5) 50%, rgba(193, 187, 187, 0.5)), -o-linear-gradient(0deg, transparent 50%, rgba(193, 187, 187, 0.5) 50%, rgba(193, 187, 187, 0.5));background-image: linear-gradient(transparent 50%, rgba(193, 187, 187, 0.5) 50%, rgba(193, 187, 187, 0.5)), linear-gradient(0deg, transparent 50%, rgba(193, 187, 187, 0.5) 50%, rgba(193, 187, 187, 0.5));}
        .flex-right-bg{background-color: white;background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rrgba(216 ,216 ,216, .5)), to(rrgba(216 ,216 ,216, .5))), -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rrgba(216 ,216 ,216, .5)), to(rrgba(216 ,216 ,216, .5)));background-image: -moz-linear-gradient(transparent 50%, rrgba(216 ,216 ,216, .5) 50%, rrgba(216 ,216 ,216, .5)), -moz-linear-gradient(0deg, transparent 50%, rrgba(216 ,216 ,216, .5) 50%, rrgba(216 ,216 ,216, .5));background-image: -o-linear-gradient(transparent 50%, rrgba(216 ,216 ,216, .5) 50%, rrgba(216 ,216 ,216, .5)), -o-linear-gradient(0deg, transparent 50%, rrgba(216 ,216 ,216, .5) 50%, rrgba(216 ,216 ,216, .5));background-image: linear-gradient(transparent 50%, rrgba(216 ,216 ,216, .5) 50%, rrgba(216 ,216 ,216, .5)), linear-gradient(0deg, transparent 50%, rrgba(216 ,216 ,216, .5) 50%, rrgba(216 ,216 ,216, .5));}
        .left-angle{position: absolute;top: 0;left: 0;display: inline-block;width: 0;height: 0;border-top: 240px solid #3c4355;border-right: 460px solid transparent;}
        .right-angle{position: absolute;top: 0;left: 0;display: inline-block;width: 0;height: 0;border-top: 180px solid #c68977;border-left: 900px solid transparent;}
        .photo{position: absolute;top: 70px;left: 55px;z-index: 1;width: 150px;height: 150px;border-radius: 50%;background: url();}
        .right-title{margin: 10px 0;color: #c68977;}
        .skills dt{width: 80px;}
        .skills dd{width: 130px;}
        .skills span{position: relative;display: inline-block;width: 100%;height: 10px;border: 1px solid #666;}
        .skills span i{position: absolute;top: 0;left: 0;height: 9px;background: #666;}
        .skills span i[schedule="20"]{width: 20%;}
        .skills span i[schedule="30"]{width: 30%;}
        .skills span i[schedule="40"]{width: 40%;}
        .skills span i[schedule="50"]{width: 50%;}
        .skills span i[schedule="60"]{width: 60%;}
        .skills span i[schedule="70"]{width: 70%;}
        .skills span i[schedule="80"]{width: 80%;}
        .skills span i[schedule="100"]{width: 100%;}
        .hobbies span{display: inline-block;margin: 10px;}
        .about{text-indent: 20px;}
        .subtitle{display: flex;font-weight: bold;}
        .subtitle > div{flex: 1;}
        .subtitle > div:first-child+div+div{flex: none;flex-basis: 100px;}
        .list{padding: 10px 30px;}
    </style>
</head>

<body class="body">
    <div class="flex">
        <div class="left-angle"></div>
        <div class="photo"></div>
        <div class="right-angle"></div>
        <div class="flex-left flex-left-bg" id="flex-left">
            <div>
                <dl>
                    <dt>年龄：</dt>
                    <dd>31</dd>
                </dl>
                <dl>
                    <dt>籍贯：</dt>
                    <dd>吉林省扶余县</dd>
                </dl>
                <dl>
                    <dt>手机：</dt>
                    <dd>19904451005</dd>
                </dl>
                <dl>
                    <dt>邮箱：</dt>
                    <dd>gezhigang1005<span style="font-size: 10px;">@163.com</span></dd>
                </dl>
                <dl>
                    <dd><a href="https://gitee.com/n67" target="_blank">GitHub</a></dd>
                </dl>

                <h3 class="title">个人技能 SKILLS</h3>
                <dl class="skills">
                    <dt>Javascript：</dt>
                    <dd><span><i schedule="100"></i></span></dd>
                </dl>
                <dl class="skills">
                    <dt>jQuery：</dt>
                    <dd><span><i schedule="100"></i></span></dd>
                </dl>
                <dl class="skills">
                    <dt>Vue：</dt>
                    <dd><span><i schedule="100"></i></span></dd>
                </dl>
                <dl class="skills">
                    <dt>Webpack：</dt>
                    <dd><span><i schedule="80"></i></span></dd>
                </dl>
                <dl class="skills">
                    <dt>NodeJS：</dt>
                    <dd><span><i schedule="80"></i></span></dd>
                </dl>
                <dl class="skills">
                    <dt>Fluteer：</dt>
                    <dd><span><i schedule="40"></i></span></dd>
                </dl>
                <dl class="skills">
                    <dt>Weex：</dt>
                    <dd><span><i schedule="60"></i></span></dd>
                </dl>
                <dl class="skills">
                    <dt>小程序：</dt>
                    <dd><span><i schedule="100"></i></span></dd>
                </dl>
                <dl class="skills">
                    <dt>微信公众号
                    <dd><span><i schedule="100"></i></span></dd>
                </dl>
                <dl class="skills">
                    <dt>快应用：</dt>
                    <dd><span><i schedule="50"></i></span></dd>
                </dl>
                <dl class="skills">
                    <dt>Java：</dt>
                    <dd><span><i schedule="60"></i></span></dd>
                </dl>
                <dl class="skills">
                    <dt>Python：</dt>
                    <dd><span><i schedule="40"></i></span></dd>
                </dl>
                <dl class="skills">
                    <dt>Go：</dt>
                    <dd><span><i schedule="20"></i></span></dd>
                </dl>
                <dl class="skills">
                    <dt>Cocos2d：</dt>
                    <dd><span><i schedule="30"></i></span></dd>
                </dl>
                <dl class="skills">
                    <dt>Mysql：</dt>
                    <dd><span><i schedule="40"></i></span></dd>
                </dl>
                <dl class="skills">
                    <dt>Oracle：</dt>
                    <dd><span><i schedule="30"></i></span></dd>
                </dl>
                <h3 class="title">兴趣爱好 HOBBIES</h3>
                <div class="hobbies">
                    <span>看书</span>
                    <span>听歌</span>
                    <span>羽毛球</span>
                    <span>掘金</span>
                    <span>github</span>
                </div>
            </div>
        </div>
        <div class="flex-right flex-right-bg" id="flex-right">
            <h1 class="right-title">戈志刚</h1>
            <h2 class="right-title">
                <dl>
                    <dt>求职意向：</dt>
                    <dd>前端工程师</dd>
                </dl>
                <br />
                <h3 class="right-title">自我介绍 ABOUT ME</h3>
                <p class="about">
                    多年的前端开发经验，对javascript ，jquery ，es6 ，css3 ，html5有着深厚的了解。
                    对客户端（浏览器）兼容性有着丰富的经验, 对移动端Hybrid App开发也有着丰富的经验
                </p>
                <hr>
                <h3 class="right-title">工作经历 WORK EXPERIENCE</h3>
                <div class="subtitle">
                    <div>2013.03-2014.05</div>
                    <div>北京钧焰文化发展有限公司</div>
                    <div>前端工程师</div>
                </div>
                <ul class="list">
                    <li>负责公司前端页面切图</li>
                    <li>前后台ajax数据交互</li>
                </ul>
                <div class="subtitle">
                    <div>2014.05-2018.09</div>
                    <div>长春嘉城信息技术股份有限公司</div>
                    <div>前端工程师</div>
                </div>
                <ul class="list">
                    <li>唯一前端架构师</li>
                    <li>前端技术语言</li>
                    <li>前端开发框架搭建</li>
                    <li>前端疑难问题解决</li>
                </ul>
                <hr>
                <h3 class="right-title">教育背景 EDUCATION</h3>
                <div class="subtitle">
                    <div>2006.09-2010.07</div>
                    <div>北京涉外经济专修学院</div>
                    <div>计算机与科学</div>
                </div>
                <div class="subtitle">
                    <div>2012.05-2012.11</div>
                    <div>北京达内科技有限公司</div>
                    <div>JAVA开发</div>
                </div>
                <!--<ul class="list">
                    <li>主修课程等等</li>
                    <li>CAD  C++</li>
                </ul>-->
                <h3 class="right-title">项目经验 PROJECT EXPERIENCE</h3>
                <div class="subtitle">
                    <div>GOA智能政务办公系统1.0 - 3.0</div>
                    <div>NPM ,jQuery</div>
                </div>
                <ul class="list">
                    <li>主要负责项目中前端整体架构设计，</li>
                    <li>搭建npm私库管理前端组件升级</li>
                    <li>基于原生prototype和jquery的组件封装</li>
                </ul>
                <div class="subtitle">
                    <div>GMOA移动智能政务办公系统</div>
                    <div>NodeJS,ES6,Vue,Webpack,Sass</div>
                </div>
                <ul class="list">
                    <li>主要负责项目中架构设计，构建工具搭建，与原生交互部分沟通与实现</li>
                </ul>
                <div class="subtitle">
                    <div>workflow工作流设计器</div>
                    <div>Raphael (ie8+)</div>
                </div>
                <ul class="list">
                    <li>图形化的流程定义界面用户以拖拽和配置的方式将流程节点部署到流程设计器的画板上,工作流引擎,并根据实际业务需要对流程节点进行配置</li>
                    
                </ul>
                <hr>
            </h2>
        </div>
    </div>
</body>

</html>